<div ms-controller="homeworkAdd" id="homeworkAdd">

    <ol class="breadcrumb">
        <li><a href="#!/homework/list/">作业列表</a></li>
        <li class="active" ms-if="mode==MODE.add">新建作业</li>
        <li class="active" ms-if="mode==MODE.edit">编辑作业</li>
    </ol>

    <div class="body clearfix">

        <h1 ms-if="mode==MODE.add">新建作业</h1>
        <h1 ms-if="mode==MODE.edit">编辑作业</h1>

        <hr class="col-xs-12">

        <div class="col-xs-12">
            <h4 class="col-xs-12">题目
                <span>(必填)</span></h4>
            <div class="col-xs-12">
                <label>
                    <input type="text" class="form-control" placeholder="请输入标题" ms-duplex-string="title">
                </label>
            </div>
        </div>

        <div class="col-xs-12">
            <h4 class="col-xs-12">班级
                <span>(必填)</span></h4>
            <div class="col-xs-12">
                <div ms-repeat="classSelectList" class="col-xs-2">
                    <label class="checkbox">
                        <input type="checkbox" data-toggle="checkbox" ms-attr-value="el"
                               ms-duplex-string="classSelected">{{el}}
                    </label>
                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <h4 class="col-xs-12">截止时间
                <span>(必填)</span></h4>
            <div class="col-xs-12">
                <div class="date-picker">

                    <div>
                        <div class="add" ms-click="addNumber($event,'+Y')">
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </div>
                        <div>
                            {{overtime|date('yyyy')}}
                            <small>年</small>
                        </div>
                        <div class="desc" ms-click="addNumber($event,'-Y')">
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        </div>
                    </div>

                    <div>
                        <div class="add" ms-click="addNumber($event,'+M')">
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </div>
                        <div>
                            {{overtime|date('MM')}}
                            <small>月</small>
                        </div>
                        <div class="desc" ms-click="addNumber($event,'-M')">
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        </div>
                    </div>

                    <div>
                        <div class="add" ms-click="addNumber($event,'+D')">
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </div>
                        <div>
                            {{overtime|date('dd')}}
                            <small>日</small>
                        </div>
                        <div class="desc" ms-click="addNumber($event,'-D')">
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        </div>
                    </div>

                    <div>
                        <div class="add" ms-click="addNumber($event,'+h')">
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </div>
                        <div>
                            {{overtime|date('HH')}}
                            <small>时</small>
                        </div>
                        <div class="desc" ms-click="addNumber($event,'-h')">
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        </div>
                    </div>

                    <div>
                        <div class="add" ms-click="addNumber($event,'+m')">
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </div>
                        <div>
                            {{overtime|date('mm')}}
                            <small>分</small>
                        </div>
                        <div class="desc" ms-click="addNumber($event,'-m')">
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        </div>
                    </div>

                    <div>
                        <div class="add" ms-click="addNumber($event,'+s')">
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </div>
                        <div>
                            {{overtime|date('ss')}}
                            <small>秒</small>
                        </div>
                        <div class="desc" ms-click="addNumber($event,'-s')">
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <hr class="col-xs-12">

        <div class="col-xs-12">
            <h4 class="col-xs-12">描述<span>(选填)</span></h4>
            <div class="col-xs-12">
                <textarea class="form-control col-xs-12" placeholder="请输入内容" ms-duplex-string="description"></textarea>
            </div>
        </div>

        <hr class="col-xs-12">
        <div class="col-xs-12">
            <button class="btn btn-success" ms-click="submit" style="width: 150px">
                <i class="glyphicon glyphicon-ok"></i>
                <span>完成</span>
            </button>
        </div>

    </div>

    <style>

        .date-picker > div {
            vertical-align: top;
            width: 80px;
            height: 100px;
            border-radius: 4px;
            margin-right: 8px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
        }

        .date-picker > div .add, .date-picker > div .desc {
            width: 100%;
            text-align: center;
            cursor: pointer;
            height: 25px;
            line-height: 25px;
            transition: all 0.3s;
            background: transparent;
            color: #34495e;
        }

        .date-picker > div .add:hover {
            border-radius: 4px 4px 0 0;
            background: #34495e;
            color: white;
            text-align: center;
            cursor: pointer;
        }

        .date-picker > div .desc:hover {
            border-radius: 0 0 4px 4px;
            background: #34495e;
            color: white;
            text-align: center;
            cursor: pointer;
        }

        .date-picker > div input[type=tel] {
            width: 40px;
        }

        input[type=text] {
            width: 300px;
        }

        textarea {
            resize: none;
            overflow: hidden;
        }

        h4 > span {
            font-size: 0.6em;
        }

        span.desc {
            color: #b9c8d8;
            font-size: 14px;
        }

    </style>


</div>